<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'echarts',
        props: ['id', 'scope', 'date'],
        mounted () {
            this.renderChart();
        },
        watch: {
            "scope": function () {
                this.renderChart();
            },
            "date": function () {
                this.renderChart();
            }
        },
        methods: {
            renderChart () {
                const date = this.date ? this.date : "2025-01";
                const year = date.split("-")[0];
                const month = date.split("-")[1];

                const monthsArray = [];

                // 遍历并获取前7个月的年月
                for (let i = 0; i < 7; i++) {
                    let yy = year;
                    let mm = month - i;

                    // 处理跨年情况
                    if (mm <= 0) {
                        mm += 12;
                        yy -= 1;
                    }

                    // 格式化并存储年月
                    const formattedMonth = `${String(yy).slice(-2)}-${String(mm).padStart(2, '0')}`;
                    monthsArray.push(formattedMonth);
                }

                const option_month = {
                    title: {
                        text: '单位：次',
                        left: 'left', // 标题放在左上角
                        top: 20, // 距离顶部 10px
                        textStyle: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为黑色
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    legend: {
                        data: ['XX1电站', 'XX2电站', 'XX3电站'],
                        top: 20, // 图例放在顶部
                        right: 20,
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: monthsArray.reverse(),
                        axisLine: {
                            lineStyle: {
                                color: '#fff', // 坐标轴颜色为黑色
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为黑色
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff', // 坐标轴颜色为黑色
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666', // 分割线颜色为灰色
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为黑色
                        },
                    },
                    series: [
                        {
                            name: 'XX1电站',
                            type: 'line',
                            data: [5, 11, 14, 2, 4, 10, 9],
                            smooth: true, // 平滑效果
                            itemStyle: {
                                color: '#6C63F0',
                            },
                        },
                        {
                            name: 'XX2电站',
                            type: 'line',
                            data: [10, 22, 2, 12, 4, 9, 1],
                            smooth: true, // 平滑效果
                            itemStyle: {
                                color: '#FF595F',
                            },
                        },
                        {
                            name: 'XX3电站',
                            type: 'line',
                            data: [3, 20, 8, 5, 2, 30, 11],
                            smooth: true, // 平滑效果
                            itemStyle: {
                                color: '#FFCA18',
                            },
                        },
                    ]
                };

                const option_year = {
                    title: {
                        text: '单位：次',
                        left: 'left', // 标题放在左上角
                        top: 20, // 距离顶部 10px
                        textStyle: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为黑色
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    legend: {
                        data: ['XX1电站', 'XX2电站', 'XX3电站'],
                        top: 20, // 图例放在顶部
                        right: 20,
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: [year - 4, year - 3, year - 2, year - 1, year],
                        axisLine: {
                            lineStyle: {
                                color: '#fff', // 坐标轴颜色为黑色
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为黑色
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff', // 坐标轴颜色为黑色
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666', // 分割线颜色为灰色
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为黑色
                        },
                    },
                    series: [
                        {
                            name: 'XX1电站',
                            type: 'line',
                            data: [35, 41, 24, 42, 14],
                            smooth: true, // 平滑效果
                            itemStyle: {
                                color: '#6C63F0',
                            },
                        },
                        {
                            name: 'XX2电站',
                            type: 'line',
                            data: [61, 32, 25, 42, 8],
                            smooth: true, // 平滑效果
                            itemStyle: {
                                color: '#FF595F',
                            },
                        },
                        {
                            name: 'XX3电站',
                            type: 'line',
                            data: [33, 20, 48, 25, 6],
                            smooth: true, // 平滑效果
                            itemStyle: {
                                color: '#FFCA18',
                            },
                        },
                    ]
                };

                var myChart = echarts.init(document.getElementById(this.id))
                myChart.clear();
                if (this.scope == "year") {
                    myChart.setOption(option_year);
                } else {
                    myChart.setOption(option_month);
                }

                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            },
        },
    };
</script>

<style scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>